<template>
    <div class="demo-collapse">
   <el-collapse accordion>
     <el-collapse-item name="1">
       <template #title>&nbsp;&nbsp;
         展开查询<el-icon class="header-icon">
           <info-filled />
         </el-icon>
       </template>
       <div>
           <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
           <el-col :span="6"><div class="grid-content ep-bg-purple" />
       客户编码 <el-input v-model="form.customerNo" style="width: 320px" />
       
          </el-col>
           <el-col :span="6" style="margin-left: 170px"><div class="grid-content ep-bg-purple" />
       客户名称<el-input v-model="form.customerName" style="width: 320px"  />
          
           </el-col>

           <el-col :span="6" ><div class="grid-content ep-bg-purple" />
       <span style="margin-left: 170px">状态</span><el-select v-model="form.customerState" style="width: 320px;margin-left: 170px"   >
        <el-option label="有效" :value="true" />
        <el-option label="无效" :value="false" />
       </el-select>
   </el-col>
       </el-row>
         
       <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
       <el-col :span="6" ><div class="grid-content ep-bg-purple" />
       客户类型<el-select v-model="form.CustomerType" style="width: 320px"  >
        <el-option label="公司" value="公司" />
        <el-option label="个人" value="个人" />
       </el-select>
   </el-col>
   <el-col :span="6" style="margin-left: 170px"><div class="grid-content ep-bg-purple" />
       所在城市<el-select v-model="form.cityId"  style="width: 320px"  >
        <el-option label="北京" value="北京" />
                <el-option label="天津" value="天津" />
                <el-option label="上海" value="上海" />
                <el-option label="广州" value="广州" />
                <el-option label="深圳" value="深圳" />
                <el-option label="珠海" value="珠海" />
                <el-option label="石家庄" value="石家庄" />
                <el-option label="苏州" value="苏州" />
                <el-option label="杭州" value="杭州" />
                <el-option label="南京" value="南京" />
                <el-option label="青岛" value="青岛" />
                <el-option label="重庆" value="重庆" />
                <el-option label="长沙" value="长沙" />
                <el-option label="西安" value="西安" />
                <el-option label="成都" value="成都" />
       
   </el-select>
   </el-col>
   <el-col :span="6" style="margin-left: 1000px;"><div class="grid-content ep-bg-purple" />
       <el-button @click="resetForm()">重置</el-button>
       <el-button type="primary" style="width: 100px;" @click="GetCustomerShow()">查询</el-button>
   </el-col>
 </el-row>
       </div>
     </el-collapse-item>

   </el-collapse>
 </div>

   
  <div style="background-color: white;width: 100%;height: 100%;">
       <h3 style="margin: 15px;">
           <span style="font-size: 17px;font-weight: 700;">客户列表</span>
       </h3>
       <el-button type="success" style="float: right;margin-top: -40px;margin-right: 200px;" @click="CustomerAdd()">+新增客户</el-button>

       <el-upload
            class="upload-demo"
            :action="apiurls + '/api/ProductionLeo/GetImport'"
            multiple
            :limit="3"
            style="float: right;margin-top: -40px;margin-right: 20px;"
        >
            <el-button type="primary">导入</el-button>
        </el-upload>

       <el-button type="success" style="float: right;margin-top: -40px;margin-right: 30px;" @click="Export()">导出</el-button>
       <el-button @click="orderPrint">打印</el-button>
       <hr  style='background-color:#d3d3d3; height:1px; border:none;'>
         <div style="margin: 20px;">
           <el-table :data="tableData" stripe style="width: 2000px" border :header-cell-style="{background:'#f5f7fa'}">
           <el-table-column prop="customerId" label="序号" width="80px" />
           <el-table-column prop="customerNo" label="客户编码" width="150px" />
           <el-table-column prop="customerName" label="客户名称" width="120px"  />
           <el-table-column prop="customerType" label="客户类型" width="120px"/>
           <el-table-column prop="customerAddress" label="客户地址" width="150px" />
           <el-table-column prop="customerPhone" label="客户电话" width="170px" />
           <el-table-column prop="cityId" label="所在城市" width="120px" />
           <el-table-column prop="handleTime" label="创建时间" width="170px" >
             <template #default="scope">
               {{ scope.row.handleTime.substring(0,10)}}
             </template>
           </el-table-column>
           <el-table-column prop="handle" label="创建人" width="80px"/>
           <el-table-column prop="customerState" label="状态" width="90px" >
               <template #default="scope">
                   <el-tag v-if="scope.row.customerState == 1" type="success">有效</el-tag>
                   <el-tag v-else type="danger">无效</el-tag>
               </template>
           </el-table-column>
           
           <el-table-column label="操作" >
               <template #default="scope">
                   <el-button  size="small" @click="CustomerUpdate(scope.row.customerId)">编辑</el-button>
                   <el-button  size="small" @click="CustomerDelete(scope.row.customerId)">删除</el-button>
               </template>
           </el-table-column>
       </el-table>

       <!-- 分页 -->
       <div >
         <el-pagination
                 v-model:current-page="form.pageIndex"
                 v-model:page-size="form.pageSize"
                 layout="prev, pager, next"
                 :total="form.totalcount"
                 class="mt-4"
                 @current-change="handleCurrentChange"
                 style="float: right;"
               />
               <span style="float: right;margin-top: 4px">共{{ form.totalcount }}条</span>
       </div>
 
     </div>
 </div>

 
  
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import { InfoFilled } from '@element-plus/icons-vue'

import {hiPrintPlugin } from 'vue-plugin-hiprint'

hiPrintPlugin.disAutoConnect();  //取消自动打印直接连接客户端
hiprint.init();

import mb from './md.json'
function orderPrint(){
    let printData = {
        Customer:[
            {
                CustomerId:"1",
                CustomerNo:"2024121601",
                CustomerName:"王晓倩",
                CustomerType:"公司",
                CustomerAddress:"北京市海淀区",
                CustomerPhone:"15049992926",
                CityId:"天津",
                Handle:"2024-12-17",
                HandleTime:"李四",
            },
            {
                CustomerId:"2",
                CustomerNo:"20241217002",
                CustomerName:"乐其",
                CustomerType:"公司",
                CustomerAddress:"北京市昌平区",
                CustomerPhone:"18644593526",
                CityId:"天津",
                Handle:"2024-12-17",
                HandleTime:"李四",
            },
            {
                CustomerId:"3",
                CustomerNo:"122717482861",
                CustomerName:"陆致远",
                CustomerType:"公司",
                CustomerAddress:"成都市",
                CustomerPhone:"15633655789",
                CityId:"北京",
                Handle:"2022-09-20",
                HandleTime:"李四",
            }
        ]
    };
    let hiprintTemplate = new hiprint.PrintTemplate({ template: mb});
    // 打印
    hiprintTemplate.print(printData);
}

const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;

const router = useRouter()
const route = useRoute()


//查询
const form=reactive({
    customerNo:'',
    customerName:'',
    cityId:'',
    CustomerType:'',
    customerState:true,

   pageIndex:1,
   pageSize:8,
   totalcount:0,
   pagecount:0,
})

const tableData = ref([])
const GetCustomerShow=()=>{
   axios.post(apiurl+'/api/ShowProduction/GetCustomerShow',form).then((res)=>{
       tableData.value = res.data.data.list
       form.totalcount=res.data.data.totalcount
       form.pagecount=res.data.data.pagecount
       console.log(res.data.data.totalcount)
   })
}

//删除
const CustomerDelete=(customerId:any)=>{
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        axios.post(apiurls+'/api/ProductionLeo/GetCustomerDel',{
            customerId:customerId
        }).then((res)=>{
            if(res.data.code==1){
                ElMessage({
                    type: 'success',
                    message: '删除成功!',
                })
                GetCustomerShow()
            }
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}



//导出
const Export=()=>{
    location.href=apiurl+`/api/ShowProduction/CusExportExcel`;
}




//重置
const resetForm=()=>{
   form.customerNo=''
   form.customerName=''
   form.cityId=''
   form.CustomerType=''
   form.customerState=true
   GetCustomerShow()
}

//新增
const CustomerAdd=()=>{
   router.push('/CustomerAdd')
}

// const open2 = () => {
//   ElNotification({
//     title: 'Welcome to Management',
//     message: "欢迎来到资源管理",
//     position: 'bottom-right',
//   })
// }

//分页
const handleCurrentChange = (val: number) => {
   form.pageIndex = val;
   GetCustomerShow();
};

const CustomerUpdate=(customerId:any)=>{
  router.push({path:'/CustomersUpdate',query:{customerId:customerId}})
}

onMounted(()=>{
    GetCustomerShow()
})

</script>
<style>
.el-row {
 margin-bottom: 20px;
}
.el-row:last-child {
 margin-bottom: 0;
}
.el-col {
 border-radius: 4px;
}

.grid-content {
 border-radius: 4px;
 min-height: 36px;
}
</style>
